
<template>
  <div>
      <div class="content-box">
        <h6 class="title-h6">产品包分布明细</h6>
        <div>
            <div style="text-align:right;padding-right:20px;margin-top:10px;"> 
                <el-button type="primary" size="small" @click="handleDownload" :loading="downloadLoading">导出列表</el-button>
            </div>
            <div style="padding:10px">
                <el-table :data="tableData" border style="width: 100%" >
                    <el-table-column
                    fixed align="center"
                    prop="name"
                    label="产品包"
                    width="200">
                    </el-table-column >
                    <el-table-column v-for="(item, index) in website" align="center" :key="index" :label="website[index]" :prop="item" width="200" show-overflow-tooltip></el-table-column>
                </el-table>
            </div>
            <div style="padding-top:20px;padding-bottom:20px;">
                <el-pagination
                @size-change="handleSizeChange" background
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
                </el-pagination>
            </div>
        </div>
      </div>  
  </div>
</template>

<script>
export default {
  name: 'PropackMap',
  data() {
      return {
          tableData: [{
            name: '使用360安全导航',
            '华军软件园': '360导航daohang888 DH803',
            '华军软件园(画中画)': '360导航daohang888 DH803',
            '太平洋下载': '360导航daohang888 DH803'
            // data: [
            //   {name: '华军软件园', value: '360导航daohang888 DH803'}, 
            //   {name: '华军软件园(画中画)', value: '360导航daohang888 DH803'},
            //   {name: '太平洋下载', value: '360导航daohang888 DH803'}
            // ]
          },{
            name: '设置hao123导航为首页',

            // data: [
            //   {name: '华军软件园', value: ''}, 
            //   {name: '华军软件园(画中画)', value: ''},
            // ] 
          },{
            name: '好图看看',
            '华军软件园(画中画)': '好图看看 1.0.2.12',
            '太平洋下载': '好图看看 1.0.2.12',
            '太平洋游戏站': '好图看看 1.0.2.12'    
          }],
          website: ['华军软件园', '华军软件园(画中画)', '太平洋下载', '太平洋下载(画中画)', '太平洋游戏站', '下载之家', '天极下载','乐游诱导', '未来软件园'],
          currentPage4: 4,
          downloadLoading: false  
      }
  },
  methods: {
    handleSizeChange(val) {
    console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
    },
    handleDownload() { //导出excel
        this.downloadLoading = true;
        let _this = this;
        require.ensure([], () => {
          const { export_json_to_excel } = require('@/vendor/Export2Excel')
          let thead = _this.website.concat();
          thead.unshift('产品包');
          const tHeader = thead;
          const list = _this.tableData;
          const filterVal = thead;
          const data = this.formatJson(filterVal, list)
          export_json_to_excel(tHeader, data, '产品包分布明细excel')
          this.downloadLoading = false
        })
    },
    formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map( j => {
                if(v[j] === undefined && j != "产品包") {
                    return v[j] = '';
                }else if(j == "产品包"){
                    return v.name
                }else {
                    return v[j]
                }
                
            }
            
        ))
      }
  }  
}
</script>

<style>

</style>
